import './UserConfig.scss'
import { useState } from 'react'
import { useEventEmitter, useMount } from 'ahooks'
import { Tooltip, Button } from "antd"
import {
    UserOutlined,
    LayoutOutlined,
    HomeOutlined,
    PaperClipOutlined,
    SmileOutlined,
    UnlockOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons'

import { UserAvatar, UserBackboard } from '../../Config/config'
import { GetIndexedDB } from '../../Utils/IndexedDB'
import { ModelBox } from '../../Model'

import { ThemeConfig } from '../../Utils/ThemeConfig'
import { HomeTemplateList, HomeRenderConfig } from '../../Utils/HomeConfig'

const UserOptionsList = [
    { value: 1, label: '基础信息', icon: <UserOutlined /> },
    { value: 2, label: '主题设置', icon: <LayoutOutlined /> },
    { value: 3, label: '主页设置', icon: <HomeOutlined /> },
    { value: 4, label: '其他设置', icon: <PaperClipOutlined /> },
]

const UserItemMapping = [
    { uuid: 1, label: '手机号码', value: 'mobile' },
    { uuid: 2, label: '位置信息', value: 'address' },
    { uuid: 3, label: '电子邮箱', value: 'email' },
    { uuid: 4, label: '其他信息', value: 'other' },
    { uuid: 5, label: '其他信息', value: 'other' },
    { uuid: 6, label: '其他信息', value: 'other' },
    { uuid: 7, label: '其他信息', value: 'other' },
    { uuid: 8, label: '其他信息', value: 'other' },
    { uuid: 9, label: '其他信息', value: 'other' },
]

const testNoticeList = [
    { uuid: 1, title: '十号系统公告通知', date: '2024-06-10' },
    { uuid: 2, title: '九号系统公告通知', date: '2024-06-09' },
    { uuid: 3, title: '八号系统公告通知', date: '2024-06-08' },
    { uuid: 4, title: '七号系统公告通知', date: '2024-06-07' },
    { uuid: 5, title: '六号系统公告通知', date: '2024-06-06' },
    { uuid: 6, title: '五号系统公告通知', date: '2024-06-05' },
]

const testProjectList = [
    { uuid: 1, title: '鹤伊高速智慧工地指挥系统' },
    { uuid: 2, title: '龙丰试验检测管理云平台' },
    { uuid: 3, title: '八达PPP项目管理云平台' },
    { uuid: 4, title: '黑龙江交通建筑材料查询平台' },
    { uuid: 5, title: '龙督试验检测管理云平台' },
    { uuid: 6, title: '黑龙江省公路建设中心智慧工地项目管理云平台' },
    { uuid: 7, title: '黑龙江省交通基础设施建设项目信息化平台' },
    { uuid: 8, title: '北漠高速智慧工地指挥系统' },
    { uuid: 9, title: '哈尔滨都市圈西南环线智慧管理云平台' },
]

const UserConfig = ({ PageEvent }) => {
    const [Active, setActive] = useState(1)
    const [UserInfo, setUserInfo] = useState()
    const [OptionsCall, setOptionsCall] = useState()

    useMount(() => { getUserInfo() })

    const getUserInfo = async () => {
        const { userInfo } = await GetIndexedDB('theme')
        setUserInfo({
            ...userInfo,
            admin: 'tonzoc',
            identity: '超级管理员',
            mobile: '13888888888',
            email: 'waerdengXiaojun@outlook.com',
            address: '黑龙江省哈尔滨市松北区中源大道黑龙江省哈尔滨市松北区中源大道',
            other: '其他记录信息'
        })
    }

    const ModifyUserBase = () => setOptionsCall({ type: 'ModifyUserJson', title: '修改个性信息', width: 800 })
    const ModifyUserPassword = () => setOptionsCall({ type: 'ModifyUserPassword', title: '修改登录密码', width: 800 })
    // const ModifyLockScreen = () => {
    //     setOptionsCall({ type: 'SelectLockScreen', title: '默认锁屏动画', width: 1000, data: LockCode })
    // }
    const OptionsList = [
        { uuid: 1, label: '用户信息', color: '#e3edf7', icon: <SmileOutlined />, click: ModifyUserBase },
        { uuid: 2, label: '修改密码', color: '#e3edf7', icon: <UnlockOutlined />, click: ModifyUserPassword },
        // { uuid: 3, label: '锁屏动画', color: '#e3edf7', icon: <ExclamationCircleOutlined />, click: ModifyLockScreen },
    ]

    const ModalEvent = useEventEmitter()
    ModalEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'userInfo') {
            PageEvent.emit({ type: 'userInfo' })
            getUserInfo()
        }
    })

    const HomeEvent = useEventEmitter()
    return (
        <div className='UserConfig'>
            <div className='UserInfo'>
                {UserInfo && <>
                    <img className='Backboard' src={UserBackboard[UserInfo.Backboard]} alt="" />
                    <img className='Avatar' src={UserAvatar[UserInfo.Avatar]} alt="" />
                    <div className='UserOptions'>
                        <div>{UserInfo.NickName}</div>
                        <div>
                            {UserOptionsList.map(({ value, label, icon }) =>
                                <div
                                    key={value}
                                    className={`UserNav${value === Active ? ' active' : ''}`}
                                    onClick={() => setActive(value)}
                                >
                                    {icon}{label}
                                </div>
                            )}
                            <div className='indicator' />
                        </div>
                    </div>

                </>}
            </div>
            <div className='UserBox'>
                {/* active 1 */}
                <div className={`UserBack animate__animated ${Active === 1 ? 'animate__delay-1s animate__fadeInLeft' : 'aminate_none animate__fadeOutLeft'}`}>
                    {UserInfo &&
                        <>
                            <img className='Backboard' src={UserBackboard[UserInfo.Backboard]} alt="" />
                            <div className='Avatar'>
                                <svg fill="none" viewBox="0 0 144 62" xmlns="http://www.w3.org/2000/svg">
                                    <path d="m111.34 23.88c-10.62-10.46-18.5-23.88-38.74-23.88h-1.2c-20.24 0-28.12 13.42-38.74 23.88-7.72 9.64-19.44 11.74-32.66 12.12v26h144v-26c-13.22-.38-24.94-2.48-32.66-12.12z" fill="white" fillRule="evenodd" />
                                </svg>
                                <img src={UserAvatar[UserInfo.Avatar]} alt="" />
                            </div>
                            <div className='UserName'>
                                <div>{UserInfo.NickName || UserInfo.admin}</div>
                                <div>{UserInfo.identity}</div>
                            </div>
                            <div className='UserItem'>
                                {UserItemMapping.map(({ uuid, label, value }) =>
                                    <div key={uuid}>
                                        <div>{label} : </div>
                                        <div>{UserInfo[value]}</div>
                                    </div>
                                )}
                            </div>
                        </>
                    }
                </div>
                <div className={`System animate__animated ${Active === 1 ? 'animate__delay-1s animate__fadeIn' : 'aminate_none animate__fadeOut'}`}>
                    <div className='Title'>系统公告</div>
                    <Button className='More' type='link'>更多</Button>
                    <div className='List'>
                        {testNoticeList.map(({ uuid, title, date }) =>
                            <div key={uuid}>
                                <div>{title}</div>
                                <div>{date}</div>
                            </div>
                        )}
                    </div>
                </div>
                <div className={`ActiveA01 animate__animated ${Active === 1 ? 'animate__delay-1s animate__fadeInRight' : 'aminate_none animate__fadeOutRight'}`}>
                    {UserInfo &&
                        <div>
                            <img className='Backboard' src={UserBackboard[UserInfo.Backboard]} alt="" />
                            <div>
                                <div>{UserInfo.identity}你好,祝您开心每一天 ! </div>
                                <div>登录于 : 2024-05-06 AM 01:02:03</div>
                            </div>
                        </div>
                    }
                </div>
                <div className={`ActiveA02 animate__animated ${Active === 1 ? 'animate__delay-1s animate__fadeInRight' : 'aminate_none animate__fadeOutRight'}`}>
                    <div className='Title'>项目列表</div>
                    <div className='List'>
                        {testProjectList.map(({ uuid, title }) =>
                            <div key={uuid}>{title}</div>
                        )}
                    </div>
                </div>
                <div className={`Options animate__animated ${Active === 1 ? 'animate__delay-1s animate__fadeInUp' : 'aminate_none animate__fadeOutDown'}`}>
                    <div className='Title'>其他操作</div>
                    <div className='List'>
                        {OptionsList.map(({ uuid, icon, color, label, click }) =>
                            <div key={uuid} className='ListClick' style={{ background: color }} onClick={click}>
                                <Tooltip title={label}>{icon}</Tooltip>
                            </div>
                        )}
                    </div>
                </div>
                {/* active 2 */}
                <div className={`ThemeConfig animate__animated ${Active === 2 ? 'animate__delay-1s animate__fadeInUp' : 'aminate_none animate__fadeOutDown'}`}>
                    <ThemeConfig PageEvent={PageEvent} />
                </div>
                {/* active 3 */}
                <div className={`TempList animate__animated ${Active === 3 ? 'animate__delay-1s animate__fadeInLeft' : 'aminate_none animate__fadeOutLeft'}`}>
                    <HomeTemplateList HomeEvent={HomeEvent} />
                </div>
                <div className={`HomeConfig animate__animated ${Active === 3 ? 'animate__delay-1s animate__fadeIn' : 'aminate_none animate__fadeOut'}`}>
                    <HomeRenderConfig HomeEvent={HomeEvent} PageEvent={PageEvent} />
                </div>
                {/* active 4 */}
                <div className={`OtherConfig animate__animated ${Active === 4 ? 'animate__delay-1s animate__slideInUp' : 'aminate_none animate__slideOutDown'}`}>
                    <div>后台首页配置</div>
                </div>

            </div>
            <ModelBox OptionsCall={OptionsCall} ModalEvent={ModalEvent} />
        </div>
    )
}

export default UserConfig;